<template>
	<!-- 服务单步骤 -->
	<view class="top_step" :style="{background:colors}">
		<view class="mask">
		</view>
		<view class="step_box">
			<p class="status">{{title}}</p>
			<view class="step_list">
				<view class="top_x">
				</view>
				<view class="setp_all">
					<view class="setp_title" v-for="(item,index) in stepData" :key="index">
						<text class="dian"
							:style="{color:item.type==1  ? colors:'#eee'}">{{item.type==1 ? '':"."}}</text>
						<text class="text" :style="{fontWeight:item.isNow == 1?'bold':'none'}">{{item.name}}</text>
						<text class="text" style="font-size: 10px; margin-top: 0px;">{{item.detail}}</text>

					</view>
				</view>
			</view>
		</view>
	</view>

</template>


<script>
	export default {
		data() {
			return {};
		},
		props: {
			title: {
				type: String
			},
			colors: {
				type: String
			},
			stepData: {
				type: Array
			}
		},
		methods: {


		}
	};
</script>


<style lang="scss" scoped>
	.top_step {
		height: 240upx;
		// background-color: pink;
		position: relative;

		.mask {
			width: 100%;
			height: 100%;
			background: linear-gradient(to right, rgba(255, 255, 255, .1), rgba(255, 255, 255, .2));
		}

		.step_box {
			// border: 1px solid black;
			width: 100%;
			height: 100%;
			position: absolute;
			top: -21px;
			left: 4px;
			
			padding: 10px 20px;

			.status {
				height: 60upx;
				line-height: 60upx;
				color: #FFFFFF;
				font-size: 30upx;
				font-weight: bold;
			}

			.step_list {
				margin-top: 30upx;
				display: inline-block;

				.top_x {
					height: 4upx;
					background-color: #FFFFFF;
				}

				.setp_all {
					// border: 1px solid pink;
					display: flex;
					align-items: center;

					.setp_title {
						transform: translateY(-18upx);
						margin-right: 85rpx;

						.dian {
							width: 30upx;
							height: 30upx;
							display: block;
							background-color: #FFFFFF;
							border-radius: 50%;
							margin: 0 auto;
							text-align: center;
							line-height: 30upx;
							font-size: 26upx;
						}

						.text {
							font-size: 12px;
							color: #FFFFFF;
							display: block;
							height: 20px;
							line-height: 20px;
							margin-top: 5px;
							width: 50px;
							text-align: center;

						}

						&:first-of-type {
							.dian {
								margin-left: 0;
							}
						}

						&:last-of-type {
							margin-right: 0;

							.dian {
								margin-left: 100%;
								transform: translateX(-100%);
							}
						}
					}
				}
			}
		}
	}
</style>